.order-body{
    position: absolute;
    top: @header-height;
    bottom: 0;
    width: 100%;
    background-color: @color-theme-white;

    .food-list{
        padding: @page-padding-h;
        width:100%;
        position: absolute;
        top:0;
        bottom:14.3rem;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .qr-wrapper{
        padding: @page-padding-h;
        width:100%;
        position: absolute;
        top:5rem;
        text-align: center;
        overflow: auto;

        .message{
            line-height:2;
        }

        .success{
            display: none;
            color: @color-theme-red;
        }
        
        .success-icon:before{
            font-size:5rem;
            color: @color-theme-red;
        }

    }

    .qr{
        display: inline-block;
        width:200px;
        height:200px;
        background-color: @color-theme-light-gray;
    }


    @cart-food-item-line-height:3rem;
    .food-item{
        position: relative;
        width: 100%;
        border-bottom: 1px solid @color-theme-light-gray;
        height: @cart-food-item-line-height;
        &.removed{
            .name,.unitPrice,.isDone{
                text-decoration: line-through;
                color: @color-theme-black;
            }
        }

        &:last-child{
            border-bottom:none;
        }
        &:extend(.clearfix all);
        .menu-name,.line,.menu-operation{
            display: inline-block;
            width:50%;
            padding-right:1rem;
            float: left;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space:nowrap;
        }

        .line{
            position: absolute;
            right: 0;
        }

        .unitPrice{
            float: left;
            display: inline-block;
            width:30%;
            padding-right: .2rem;
            text-align: right;
            color: @color-theme-red;
        }
        .isDone,.preview-count{
            float: left;
            display: inline-block;
            width:20%;
            text-align: right;
            color: @color-theme-red;
            i:before{
                font-size:1.3rem;
                line-height:@cart-food-item-line-height;
            }
        }

        .name,.unitPrice,.preview-count,.isDone{
            font-size:1rem;
            height:@cart-food-item-line-height;
            line-height:@cart-food-item-line-height;
        }
        .count{
            display: inline-block;
            text-align: right;
            font-size: .8rem;
            padding-left: .2rem;
        }
    }

    @pivot-left-right:8px;
    .summary{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: @page-padding-h @page-padding-h @page-padding-h/2;
        #total{
            color: @color-theme-red;
        }
        .pivot{
            z-index: 20;
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:11px;
            background: @color-theme-white;
        }
        .pivot-center{
            position: absolute;
            left:@pivot-left-right;
            right:@pivot-left-right;
            top:0;
            height:100%;
            background: url('/img/summary-pivot-center.png')  repeat top
        }
        .pivot-left{
            position: absolute;
            left:0;
            top:0;
            height:100%;
            width: @pivot-left-right;
            background: url('/img/summary-pivot-left.png') no-repeat top;
        }
        .pivot-right{
            position: absolute;
            right:0;
            top:0;
            height:100%;
            width: @pivot-left-right;
            background: url('/img/summary-pivot-right.png') no-repeat top;
        }

        .summary-content{
            position: relative;
            z-index: 200;
            background-color: transparent;
            margin: .5rem 8px 1rem;
            padding: 1rem;
            border:1px solid @color-theme-gray;
            border-top:none;
            //box-shadow:0 0 8px @color-theme-light-gray;
        }
        .pivot-bottom{
            position: absolute;
            bottom:-16px;
            left:@pivot-left-right;
            right:@pivot-left-right;
            height:16px;
            background: url('/img/summary-pivot-bottom.png') repeat top;
        }
        .summary-line{
            position: relative;
            width: 100%;
            margin-bottom: 1rem;
        }

        .summary-right{
            position: absolute;
            right: 0;
        }

        .total{
            text-align: right;
            margin-bottom: 1rem;
            font-size:1.2rem;
            
            .price{
                color: @color-theme-red;
            }
        }

        .preview_button_wrapper{
            height:2.5rem;
        }

        .checking,.book{
            color: @color-theme-white;
            width: 100%;
            background-color: @color-theme-red;
            font-size: 1.2rem;
            height:2.5rem;
            &.payed{
                background: @color-theme-light-gray;
            }
            &.pay{
                background-color: @color-theme-green;
            }
        }

        .checking{
            background: #50b30f url('/img/checking.gif') no-repeat 30% 50%;
            -webkit-background-size: 2.5rem;
            background-size: 2.5rem;
            display: none;
        }
        
        
        .btn-group{
            &:extend(.clearfix all);
            .btn{
                width:45%;
                float: left;
                &:first-child{
                    margin-right: 10%;
                }
            }
        }


    }

}








